<template>
  <div>
    <el-card shadow="never" class="mt20" :body-style="{ padding: '20px' }">
      <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="120px">
        <!-- 添加渠道 -->
        <el-tabs v-model="activeName">
          <el-tab-pane label="添加渠道" name="first">
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="渠道名称" prop="name">
                  <el-popover
                    placement="top-start"
                    title="提示！"
                    width="250"
                    trigger="hover"
                    popper-class="color-gray6"
                    close-delay="0"
                    content="注：公司简称+投放媒体，如：武汉有戏-265g、凡帝网络-百度、某人名-淘宝"
                  >
                    <el-input slot="reference" v-model.trim="form.name" placeholder="请输入渠道名称" class="wd-250"></el-input>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="渠道类型">
                  <el-select v-model="form.typa" placeholder="请选择渠道类型" class="wd-250">
                    <el-option :label="item" :value="item" v-for="item in channel_typa" :key="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="cid" prop="cid">
                  <el-popover
                    placement="top-start"
                    title="提示！"
                    width="250"
                    trigger="hover"
                    close-delay="0"
                    popper-class="color-gray6"
                    content="注：只可填写小写字母，（勾选添加站长后可自动生成此项）"
                  >
                    <el-input slot="reference" v-model="form.cid" placeholder="请输入cid" class="wd-250"></el-input>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="ccid">
                  <el-popover
                    placement="top-start"
                    title="提示！"
                    width="250"
                    trigger="hover"
                    close-delay="0"
                    popper-class="color-gray6"
                    content="注：多个ccid请用单个空格隔开,只可填写小写字母(sem、信息流以及CPA，可以不用填写ccid)"
                  >
                    <el-input slot="reference" v-model="form.ccid" placeholder="请输入ccid" class="wd-250"></el-input>
                  </el-popover>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="合作模式">
                  <el-select v-model="form.cooperation_model" placeholder="请选择合作模式" class="wd-250">
                    <el-option :label="item" :value="item" v-for="item in cooperation_model" :key="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="合作网址" prop="cooperation_site">
                  <el-input v-model="form.cooperation_site" placeholder="请输入合作网址" style="width: 450px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="是否充值返利">
                  <el-popover
                    placement="top-start"
                    title="提示！"
                    width="250"
                    trigger="hover"
                    close-delay="0"
                    popper-class="color-gray6"
                    content="注：选择否，则该渠道的注册用户将隐藏平台返利并禁止参与平台返利活动"
                  >
                    <el-select slot="reference" v-model="form.is_rebate" placeholder="请选择是否充值返利" class="wd-250">
                      <el-option :label="item.label" :value="item.value" v-for="item in is_rebate" :key="item.value"></el-option>
                    </el-select>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="返点" prop="rebates">
                  <el-popover
                    placement="top-start"
                    title="提示！"
                    width="250"
                    trigger="hover"
                    close-delay="0"
                    popper-class="color-gray6"
                    content="注：如50%返点，则1.5，无返点则1"
                  >
                    <el-input slot="reference" v-model="form.rebates" placeholder="请输入返点" class="wd-250"></el-input>
                  </el-popover>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="联系人" prop="linkman">
                  <el-input v-model="form.linkman" class="wd-250" placeholder="请输入联系人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="联系QQ" prop="qq_num">
                  <el-input v-model="form.qq_num" class="wd-250" placeholder="请输入联系QQ"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="form.phone" class="wd-250" placeholder="请输入联系电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="开户名" prop="account_name">
                  <el-input v-model="form.account_name" placeholder="请输入开户名" class="wd-250"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="开户行">
                  <el-select v-model="form.account_bank" placeholder="请选择开户行" class="wd-250">
                    <el-option :label="item.label" :value="item.value" v-for="item in account_bank" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="银行账户">
                  <el-input v-model="form.account" placeholder="请输入银行账户" class="wd-250"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="邮寄地址">
                  <el-input v-model="form.address" placeholder="请输入邮寄地址" class="wd-250"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="支行地址">
                  <el-input v-model="form.subbranch_info" placeholder="请输入支行地址" class="wd-250"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="备注">
                  <el-input v-model="form.note" placeholder="请输入备注" class="wd-250"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0" v-for="(item, index) in h5_url" :key="item.key">
                <el-form-item :label="'H5注册页链接' + (index + 1)">
                  <el-input v-model="item.value" style="width: 400px"></el-input>
                </el-form-item>
                <el-button type="primary" @click="addUrlLink" v-if="index == 0">添加</el-button>
                <el-button @click.prevent="removeUrlLink(item)" v-if="index > 0">删除</el-button>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="4" :offset="0">
                <el-form-item label="添加站长">
                  <el-switch v-model="form.add_master" active-text="是" inactive-text="否" @change="next('form', 2)"> </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="4" :offset="0" v-show="form.add_master">
                <el-form-item label="添加成员">
                  <el-switch v-model="form.is_newMember" active-text="是" inactive-text="否" @change="next('form', 3)"> </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <el-form ref="form2" :inline="true" :rules="rules" :model="form" label-width="120px">
        <!-- 添加站长 -->
        <el-tabs v-model="activeName" v-show="module2">
          <el-tab-pane label="添加站长" name="first">
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="登录账号" prop="username">
                  <el-input v-model="form.username" placeholder="请输入登录账号" class="wd-250"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="登录密码">
                  <el-input v-model="form.password" placeholder="请输入登录密码" class="wd-250"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="合作状态">
                  <el-switch v-model="form.status" active-text="是" inactive-text="否"> </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="网站名称" prop="web_name">
                  <el-input v-model="form.web_name" placeholder="请输入网站名称" class="wd-250"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="网站类型" prop="web_type">
                  <el-select v-model="form.web_type" placeholder="请选择网站类型" class="wd-250">
                    <el-option :label="item.label" :value="item.value" v-for="item in web_type" :key="item.vaule"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="公司">
                  <el-input v-model="form.company" class="wd-250" placeholder="请输入公司"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="注册单价" prop="register_price">
                  <el-input v-model="form.register_price" placeholder="请输入注册单价" class="wd-250"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="活跃单价" prop="active_price">
                  <el-input v-model="form.active_price" placeholder="请输入活跃单价" class="wd-250"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" :offset="0">
                <el-form-item label="Email">
                  <el-input v-model="form.email" class="wd-250" placeholder="请输入email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="结算周期" prop="pay_method">
                  <el-select v-model="form.pay_method" placeholder="请选择结算周期" class="wd-250">
                    <el-option :label="item.label" :value="item.value" v-for="item in pay_method" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
        <!-- 添加CPS成员 -->
      </el-form>

      <hr />
      <el-button type="primary" @click="onSubmit" class="fr mr100 mb20 mt20">立即创建</el-button>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false,
      activeName: 'first',
      module2: false,
      form: {},
      h5_url: [{ value: '' }],
      // cid_rule: [{ required: true, message: '请输入cid', trigger: 'blur' }],
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        cooperation_site: [{ required: true, message: '请输入合作网址', trigger: 'blur' }],
        rebates: [{ required: true, message: '请输入返点', trigger: 'blur' }],
        linkman: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        qq_num: [{ required: true, message: '请输入联系QQ', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        account_name: [{ required: true, message: '请输入开户名', trigger: 'blur' }],
        username: [
          { required: true, message: '请输入登录账号', trigger: 'blur' },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        web_name: [{ required: true, message: '请输入网站名称', trigger: 'blur' }],
        web_type: [{ required: true, message: '请选择网站类型', trigger: 'blur' }],
        register_price: [{ required: true, message: '请输入注册单价', trigger: 'blur' }],
        active_price: [{ required: true, message: '请输入活跃单价', trigger: 'blur' }],
        pay_method: [{ required: true, message: '请选择结算周期', trigger: 'blur' }],
      },
      // 渠道类型
      channel_typa: ['sem', 'CPS', 'TK', 'CPA', '导航站', 'UV', '媒体站', '信息流'],
      // 合作模式
      cooperation_model: ['CPC', 'CPA', 'CPS', 'CPT', 'CPL', 'CPM', 'CPV', 'CPD'],
      web_type: [
        { label: '小说', value: 'xs' },
        { label: '动漫', value: 'dm' },
        { label: '电影', value: 'dy' },
        { label: '下载', value: 'xz' },
        { label: '图片', value: 'tp' },
        { label: '客户端', value: 'khd' },
        { label: '群发', value: 'qf' },
        { label: '其他', value: 'qt' },
      ],
      account_bank: [
        { label: '支付宝', value: 'alipay' },
        { label: '招商银行', value: 'cmb' },
        { label: '工商银行', value: 'icbc' },
        { label: '中国银行', value: 'chinabank' },
        { label: '建设银行', value: 'ccb' },
        { label: '交通银行', value: 'bankcomm' },
        { label: '农业银行', value: 'abc' },
        { label: '光大银行', value: 'ceb' },
        { label: '中信银行', value: 'ecitic' },
        { label: '兴业银行', value: 'cib' },
        { label: '农村商业银行', value: 'rcbank' },
        { label: '农村信用社', value: 'creditunion' },
        { label: '中国民生银行', value: 'cmbc' },
        { label: '广州银行', value: 'gzbc' },
        { label: '华夏银行', value: 'hxb' },
        { label: '北京银行', value: 'bob' },
        { label: '上海浦东发展银行', value: 'spdb' },
        { label: '广发银行', value: 'cgb' },
        { label: '平安银行', value: 'pab' },
        { label: '中国邮政储蓄银行', value: 'psbc' },
        { label: '杭州银行', value: 'hzb' },
      ],
      pay_method: [
        { label: '日结', value: 'rj' },
        { label: '周结', value: 'zj' },
        { label: '月结', value: 'yj' },
      ],
      is_rebate: [
        { label: '是', value: '1' },
        { label: '否', value: '0' },
      ],
    };
  },
  mounted() {},
  methods: {
    onSubmit() {
      // 收集到子组件数据的同时还需要调用验证函数
      if (!this.examine()) {
        return;
      }
      // 验证完成之后需要处理特殊字段
      this.setForm();
      this.$api.addChannel(this.form).then(res => {
        if (res.code == 101) {
          this.$message.success('新增成功');
          this.module2 = false;
          this.form = {};
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    setForm() {
      this.form.h5_url = this.h5_url.map(item => item.value).join(' ');
    },
    // 检测
    examine() {
      if (!this.module2) {
        if (this.form.cid == '' || this.form.cid == undefined) {
          this.$message.warning('请输入cid');
          return false;
        }
        return this.check('form1', '添加渠道');
      } else if (this.module2) {
        return this.check('form1', '添加渠道') && this.check('form2', '添加站长');
      }
    },
    // 验证Fnc
    check(formName, tips) {
      let res = false;
      this.$refs[formName].validate(valid => {
        if (valid) {
          res = true;
          return true;
        } else {
          res = false;
          this.$message.warning(`请先把${tips}必填内容填完`);
          return false;
        }
      });
      return res;
    },
    next(formName, flag) {
      this['module' + flag] = !this['module' + flag];
      // 关闭时需要把数据清空
      if (!this.module2) {
        delete this.form.username;
        delete this.form.password;
        delete this.form.status;
        delete this.form.web_name;
        delete this.form.web_type;
        delete this.form.company;
        delete this.form.register_price;
        delete this.form.active_price;
        delete this.form.email;
        delete this.form.subbranch_info;
        delete this.form.pay_method;
      }
    },
    addUrlLink() {
      this.h5_url.push({
        value: '',
        key: Date.now(),
      });
    },
    removeUrlLink(item) {
      var index = this.h5_url.indexOf(item);
      if (index !== -1) {
        this.h5_url.splice(index, 1);
      }
    },
  },
};
</script>
<style lang='stylus' scoped>
body {
}
</style>
